<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Weather extends React.Component{
            constructor(props){
                super(props)
                //事件回调使用函数可能有很多，那需要为每一个事件回调函数都修改this指向，比较麻烦
                //this.changeWeather = this.changeWeather.bind(this)
            }
            //类中可以直接写赋值语句
            //给Weather类添加一个属性为state
            state={isHot:false,wind:"微风"}
            render(){
                const {isHot,wind} = this.state
                return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}，{wind}</h1>

            }
            //自己写的函数基本上都是作为事件的回调函数使用

            //下面这样写是把changeWeather放在Weather的原型上
            // changeWeather{
            //     const isHot = this.state.isHot
            //     this.setState({isHot:!isHot})
            // }
            
            //下面这样写是把定义的函数复制给Weather的一个变量
            //所以changeWeather现在被放在了Weather实例对象自身上（这里定义的函数就变成了Weather的成员变量了）
            // changeWeather = function(){
            //     const isHot = this.state.isHot
            //     this.setState({isHot:!isHot})
            // }

            //箭头函数没有自己的this，但是如果在箭头函数里面使用了this不会报错，箭头函数会找外层的this使用
            /*
            以后使用类来编写组件时，自定义方法都要写成赋值语句形式+箭头函数
            */
            changeWeather = ()=>{
                const isHot = this.state.isHot
                this.setState({isHot:!isHot})
            }

        }
        const w1 = new Weather()
        ReactDOM.render(<Weather/>, document.getElementById("test"))
    </script>
</body>
</html>